<script setup>
import { onMounted, ref } from 'vue'
import { queryDeptList, queryMedalConfig, medalConfigSwitchStatus, updateMedalConfig } from '@/api/system/medal'
import { iconMap } from './config'

const depList = ref([])
const getDeptList = () => {
  queryDeptList().then(list => {
    currentDepId.value = list[0].deptId
    depList.value = list
    getTableData()
  })
}

const currentDepId = ref(null)
const selectDep = (item) => {
  currentDepId.value = item
  getTableData()
}

const tableData = ref([])
const getTableData = () => {
  queryMedalConfig({ deptId: currentDepId.value }).then(data => {
    data.forEach(item => item.operateStatus = false)
    tableData.value = data
  })
}

const statusChange = ({ medalId, status }) => {
  medalConfigSwitchStatus(medalId, status).then(() => {
    getTableData()
  })
}

const saveStatus = (row) => {
  updateMedalConfig(row).then(() => {
    row.operateStatus = false
    getTableData()
  })
}

onMounted(() => {
  getDeptList()
})
</script>

<template>
  <div class="medal-container">
    <div class="left-box">
      <div class="uifix-role-span header">公司列表</div>
      <div
        v-for="(item, key) in depList"
        :key="key"
        class="item"
        :style="currentDepId === item.deptId && 'background-color: var(--admin-table-selected-bg);color: var(--ui-theme-color);font-weight: 600;'"
        @click="selectDep(item.deptId)"
      >{{ item.name }}
      </div>
    </div>
    <div class="right-box">
      <div class="uifix-role-span header">勋章管理</div>
      <el-table stripe height="calc(100vh - 200px)" :data="tableData" style="width: 100%">
        <el-table-column label="图标">
          <template slot-scope="scope">
            <img class="icon-box" :src="iconMap.get(Number(scope.row.icon))" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称">
          <template slot-scope="scope">
            <span v-show="!scope.row.operateStatus">{{ scope.row.name }}</span>
            <el-input v-show="scope.row.operateStatus" v-model="scope.row.name" placeholder="请输入名称" />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              @change="statusChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="scope">
            <section style="display: flex; justify-content: center; align-items: center;">
              <el-button
                v-show="!scope.row.operateStatus"
                type="text"
                @click="scope.row.operateStatus = true"
              ><svg-icon icon-class="icon-edit" /> 编辑</el-button>
              <el-button v-show="scope.row.operateStatus" type="text" @click="saveStatus(scope.row)"><svg-icon icon-class="save-icon" /> 保存</el-button>
              <el-button
                v-show="scope.row.operateStatus"
                type="text"
                @click="scope.row.operateStatus = false; getTableData()"
              ><svg-icon icon-class="cancel-icon" /> 取消</el-button>
            </section>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.medal-container {
  padding: 20px;
  display: flex;
  gap: 20px;
  background-color: #fff;
  .left-box {
    border-radius: 4px;
    width: 400px;
    background-color: #fff;

  }
  .left-box >div{
    width: 100%;
  }
  .header {
    font-size: 15px;
    height: 24px;
    line-height: 24px;
    margin-left: 10p;
    margin-bottom: 25px;
  }

  .right-box {
    flex: 1;
    border-radius: 4px;
    background-color: #fff;

    .icon-box {
      width: 25px;
      height: 100%;
    }
  }

  .item {
    cursor: pointer;
    font-size: 14px;
    color: var(--brother-common-table-empty-text-color);
    height: 37px;
    line-height: 37px;
    padding-left: 53px;
  }
}
</style>
